<!DOCTYPE html>
<html lang="en" style="background-color: #ccc;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>iframe 页面内容</div>
    <iframe src="./iframe-page.html" frameborder="0" id="iframe-page" class="iframe-page"></iframe>
    <hr>
    <div class="send-message">
        <div class="title">发送消息到子级页面</div>
        <textarea class="textarea" id="send-content"></textarea>
        <input type="button" class="btn-send" id="btn-send" value="发送消息">
    </div>
    <div class="received-message">
        <div class="title">接收子级页面消息</div>
        <textarea class="textarea" id="received-content"></textarea>
    </div>
    <script>
        var iframeDom = document.getElementById("iframe-page");
        var clickCallback = function (e) {
            var content = document.getElementById("send-content").value;
            iframeDom.contentWindow.postMessage(content);
        };
        var btn = document.getElementById("btn-send");
        btn.removeEventListener("click", clickCallback);
        btn.addEventListener("click", clickCallback)

        var receivedMessageCallback = function (e) {
            document.getElementById("received-content").value = e.data;
        };
        window.removeEventListener("message", receivedMessageCallback);
        window.addEventListener("message", receivedMessageCallback);
    </script>
</body>

</html>